<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>商品单页</title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/logo/favicon.ico"
          type="image/x-icon"/>

    <!--== Google Fonts ==-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">

    <!--=== Bootstrap CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/font-awesome.css" rel="stylesheet">
    <!--=== Plugins CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/plugins.css" rel="stylesheet">
    <!--=== Helper CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/helper.min.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/style.css?v=1.012" rel="stylesheet">

    <!-- Modernizer JS -->
    <script src="${pageContext.request.contextPath}/static/js/vendor/modernizr-2.8.3.min.js"></script>

    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .btn-not {
            pointer-events: none;
            opacity: 0.2;
            /*不可选中 加 置灰*/
        }
    </style>
</head>
<body>

<%--header--%>
<jsp:include page="../head.jsp"/>
<!--== Start Page Breadcrumb ==-->
<div class="page-breadcrumb-wrap">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-breadcrumb">
                    <ul class="nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="shop.html">Shop</a></li>
                        <li><a href="#" class="active">
                            <c:if test="${fn:length(product.name) > 12}">
                                ${fn:substring(product.name,0 ,12 )}...
                            </c:if>
                            <c:if test="${fn:length(product.name) <= 12}">
                                ${product.name}
                            </c:if>
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Page Breadcrumb ==-->

<!--== Page Content Wrapper Start ==-->
<div id="page-content-wrapper">
    <div class="container">
        <div class="row">
            <!-- Single Product Page Content Start -->
            <div class="col-lg-12">
                <div class="single-product-page-content">
                    <div class="row">
                        <!-- Product Thumbnail Start -->
                        <div class="col-lg-5">
                            <div class="product-thumbnail-wrap">
                                <div class="product-thumb-carousel owl-carousel">
                                    <div class="single-thumb-item">
                                        <a href="#"><img class="img-fluid img-pro"
                                                         src="${pageContext.request.contextPath}/${product.imgs}"
                                                         alt="Product"/></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Product Thumbnail End -->

                        <!-- Product Details Start -->
                        <div class="col-lg-7">
                            <div class="product-details">

                                    <%--<a href="single-product.html">--%>
                                    <c:if test="${product.state == '0'}">
                                        <h2 style="color: #595959;"> ${product.name} </h2>
                                    </c:if>
                                        <c:if test="${product.state == '0'}">
                                            <h2> ${product.name} </h2>
                                        </c:if>
                                    <%--</a>--%>

                                <span class="price">$${product.shelfPrice}</span>

                                <div class="product-info-stock-sku">
                                    <c:if test="${product.stock > 0}">
                                        <span class="product-stock-status text-success">库存${product.stock}件</span>
                                    </c:if>
                                    <c:if test="${product.stock == 0}">
                                        <span class="product-stock-status text-danger">库存0件</span>
                                    </c:if>
                                    <%--<span class="product-sku-status"><strong>SKU</strong> MH03</span>--%>
                                </div>

                                <p class="products-desc">${product.detail}</p>

                                <div class="product-quantity d-flex align-items-center">
                                    <div class="quantity-field">
                                        <label for="qty">购买数量</label>
                                        <input type="number" id="qty" min="1" max="100" value="1"/>
                                        <span style="color: #BEC1BB;">
                                            用户每次限购 5 件
                                        </span>
                                    </div>
                                    <div style="display: block;margin-left: 50px;" >
                                        月销量${product.monthlySales}
                                    </div>


                                </div>
                                <div style="margin-top: 15px;">
                                    <c:if test="${product.stock > 0 && product.state == '1'}">
                                        <a href="#" onclick="add2cart('${product.pid}')" class="btn btn-cart-large addcar"><i
                                                class="fa fa-shopping-cart "></i>
                                            添加到购物车</a>
                                        <a href="#" onclick="createorder(

                                        )" target="_blank"
                                           class="btn btn-cart-large"><i class="fa fa-shopping-cart addcar"></i>
                                            立即购买</a>
                                    </c:if>
                                    <c:if test="${product.stock == 0}">
                                        <a href="#" class="btn-not btn btn-cart-large"><i
                                                class="fa fa-shopping-cart"></i>
                                            添加到购物车</a>
                                        <a href="#" target="_blank" class="btn-not btn btn-cart-large"><i
                                                class="fa fa-shopping-cart"></i>
                                            立即购买</a>
                                    </c:if>
                                    <c:if test="${product.state == '0'}">
                                        <a href="#" onclick="soldOut()" class="btn-not btn btn-cart-large"><i
                                                class="fa fa-shopping-cart"></i>
                                            添加到购物车</a>
                                        <a href="#" onclick="soldOut()" target="_blank" class="btn-not btn btn-cart-large"><i
                                                class="fa fa-shopping-cart"></i>
                                            立即购买</a>
                                    </c:if>
                                </div>
                                <%--还没做--%>
                                <div class="product-btn-group">
                                    <c:if test="${collect == true}">
                                        <a href="javascript:void(0);" onclick="updateCollect(this,'${product.pid}')"
                                           class="btn btn-round  btn-wish  ">
                                            <i class="fa fa-heart"></i></a>
                                    </c:if>
                                    <c:if test="${collect == false}">
                                        <a href="javascript:void(0);" onclick="updateCollect(this,'${product.pid}')"
                                           class="btn btn-round btn-nowish ">
                                            <i class="fa fa-heart"></i></a>
                                    </c:if>
                                </div>
                            </div>
                        </div>
                        <!-- Product Details End -->
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <!-- Product Full Description Start -->
                            <div class="product-full-info-reviews">
                                <!-- Single Product tab Menu -->
                                <nav class="nav" id="nav-tab">
                                    <a id="description-tab" data-toggle="tab" href="#description">Description</a>
                                    <a class="active" id="reviews-tab" data-toggle="tab" href="#reviews">评论</a>
                                </nav>
                                <!-- Single Product tab Menu -->

                                <!-- Single Product tab Content -->
                                <div class="tab-content" id="nav-tabContent">
                                    <%--<div class="tab-pane fade show active" id="description">--%>
                                    <%--<p>Stay comfortable and stay in the race no matter what the weather's up to. The--%>
                                    <%--Bruno Compete Hoodie's water-repellent exterior shields you from the--%>
                                    <%--elements, while advanced fabric technology inside wicks moisture to keep you--%>
                                    <%--dry.Stay comfortable and stay in the race no matter what the weather's up--%>
                                    <%--to. The Bruno Compete Hoodie's water-repellent exterior shields you from the--%>
                                    <%--elements, while advanced fabric technology inside wicks moisture to keep you--%>
                                    <%--dry.Stay comfortable and stay in the race no matter what the weather's up--%>
                                    <%--to. The Bruno Compete Hoodie's water-repellent exterior shields you from the--%>
                                    <%--elements, while advanced fabric technology inside wicks moisture to keep you--%>
                                    <%--dry.</p>--%>

                                    <%--<ul>--%>
                                    <%--<li>Adipisicing elitEnim, laborum.</li>--%>
                                    <%--<li>Lorem ipsum dolor sit</li>--%>
                                    <%--<li>Dolorem molestiae quod voluptatem! Sint.</li>--%>
                                    <%--<li>Iure obcaecati odio pariatur quae saepe!</li>--%>
                                    <%--</ul>--%>
                                    <%--</div>--%>

                                    <%--评论板块--%>
                                    <div class="tab-pane fade show active" id="reviews">
                                        <div class="row">
                                            <div class="col-lg-7">
                                                <div class="product-ratting-wrap">
                                                    <div class="pro-avg-ratting">
                                                        <h4>4.5 <span>(Overall)</span></h4>
                                                        <span>Based on 9 Comments</span>
                                                    </div>
                                                    <div class="ratting-list">
                                                        <div class="sin-list float-left">
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <span>(5)</span>
                                                        </div>
                                                        <div class="sin-list float-left">
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star-o"></i>
                                                            <span>(3)</span>
                                                        </div>
                                                        <div class="sin-list float-left">
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star-o"></i>
                                                            <i class="fa fa-star-o"></i>
                                                            <span>(1)</span>
                                                        </div>
                                                        <div class="sin-list float-left">
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star"></i>
                                                            <i class="fa fa-star-o"></i>
                                                            <i class="fa fa-star-o"></i>
                                                            <i class="fa fa-star-o"></i>
                                                            <span>(0)</span>
                                                        </div>
                                                    </div>
                                                    <div class="rattings-wrapper">

                                                        <div class="sin-rattings">
                                                            <div class="ratting-author">
                                                                <h3>Cristopher Lee</h3>
                                                                <div class="ratting-star">
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <span>(5)</span>
                                                                </div>
                                                            </div>
                                                            <p>enim ipsam voluptatem quia voluptas sit aspernatur aut
                                                                odit aut fugit, sed quia res eos qui ratione voluptatem
                                                                sequi Neque porro quisquam est, qui dolorem ipsum quia
                                                                dolor sit amet, consectetur, adipisci veli</p>
                                                        </div>

                                                        <div class="sin-rattings">
                                                            <div class="ratting-author">
                                                                <h3>Nirob Khan</h3>
                                                                <div class="ratting-star">
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <span>(5)</span>
                                                                </div>
                                                            </div>
                                                            <p>enim ipsam voluptatem quia voluptas sit aspernatur aut
                                                                odit aut fugit, sed quia res eos qui ratione voluptatem
                                                                sequi Neque porro quisquam est, qui dolorem ipsum quia
                                                                dolor sit amet, consectetur, adipisci veli</p>
                                                        </div>

                                                        <div class="sin-rattings">
                                                            <div class="ratting-author">
                                                                <h3>MD.ZENAUL ISLAM</h3>
                                                                <div class="ratting-star">
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <i class="fa fa-star"></i>
                                                                    <span>(5)</span>
                                                                </div>
                                                            </div>
                                                            <p>enim ipsam voluptatem quia voluptas sit aspernatur aut
                                                                odit aut fugit, sed quia res eos qui ratione voluptatem
                                                                sequi Neque porro quisquam est, qui dolorem ipsum quia
                                                                dolor sit amet, consectetur, adipisci veli</p>
                                                        </div>

                                                    </div>
                                                    <div class="ratting-form-wrapper">
                                                        <h3>Add your Comments</h3>
                                                        <form action="#" method="post">
                                                            <div class="ratting-form row">
                                                                <div class="col-12 mb-4">
                                                                    <h5>Rating:</h5>
                                                                    <div class="ratting-star fix">
                                                                        <i class="fa fa-star-o"></i>
                                                                        <i class="fa fa-star-o"></i>
                                                                        <i class="fa fa-star-o"></i>
                                                                        <i class="fa fa-star-o"></i>
                                                                        <i class="fa fa-star-o"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6 col-12 mb-4">
                                                                    <label for="name">Name:</label>
                                                                    <input id="name" placeholder="Name" type="text">
                                                                </div>
                                                                <div class="col-md-6 col-12 mb-4">
                                                                    <label for="email">Email:</label>
                                                                    <input id="email" placeholder="Email" type="text">
                                                                </div>
                                                                <div class="col-12 mb-4">
                                                                    <label for="your-review">Your Review:</label>
                                                                    <textarea name="review" id="your-review"
                                                                              placeholder="Write a review"></textarea>
                                                                </div>
                                                                <div class="col-12">
                                                                    <input value="add review" type="submit">
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Single Product tab Content -->
                            </div>
                            <!-- Product Full Description End -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- Single Product Page Content End -->
        </div>
    </div>
</div>
<!--== Page Content Wrapper End ==-->

<%-- foot --%>
<jsp:include page="../foot.jsp"/>
<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->
<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-3.3.1.min.js"></script>
<%--Jquery Fly Min Js--%>
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery.fly.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="${pageContext.request.contextPath}/static/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/plugins.js"></script>
<!--=== product And store Js ===-->
<script src="${pageContext.request.contextPath}/static/js/product.js"></script>
<script src="${pageContext.request.contextPath}/static/js/api/store.js"></script>
<!--=== Active Js ===-->
<script src="${pageContext.request.contextPath}/static/js/active.js"></script>
</body>

<%--<script>--%>
    <%--var user = "<%=session.getAttribute("user")%>";--%>

    <%--if(user != "null"){--%>
        <%--$(".addcar").click(function (event) {--%>
            <%--var offset = $("#fly-end").offset();--%>
            <%--var addcar = $(this);--%>
            <%--var img = $(".img-pro").attr('src');--%>
            <%--var flyer = $('<img class="u-flyer" src="' + img + '">');--%>
            <%--flyer.fly({--%>
                <%--start: {--%>
                    <%--left: event.pageX,--%>
                    <%--top: event.pageY--%>
                <%--},--%>
                <%--end: {--%>
                    <%--left: offset.left,--%>
                    <%--top: offset.top,--%>
                    <%--width: 0,--%>
                    <%--height: 0--%>
                <%--},--%>
                <%--onEnd: function () {--%>
                    <%--$("#msg").show().animate({width: '250px'}, 200).fadeOut(500);--%>
                    <%--this.destory();--%>
                <%--}--%>
            <%--});--%>
        <%--});--%>
    <%--}--%>


    <%--function add2cart() {--%>
        <%--if(user == "null"){--%>
            <%--prompt("you didn't login,went login");--%>
            <%--window.setTimeout(function () {--%>
                <%--window.location.href = "${pageContext.request.contextPath}/user/gotologin.do";--%>
            <%--}, 1000);--%>
        <%--}else{--%>
            <%--$.ajax({--%>
                <%--url: "${pageContext.request.contextPath}/car/add2cart.do",--%>
                <%--type: "post",--%>
                <%--data: {--%>
                    <%--pid: $("#pid").val(),--%>
                    <%--count: $("#qty").val()--%>
                <%--},--%>
                <%--success: function (d) {--%>
                    <%--if (d.status == 1) {--%>
                        <%--prompt(d.msc,900);--%>
                        <%--setTimeout(function () {--%>
                            <%--location.href = "${pageContext.request.contextPath}/gotologin.do";--%>
                        <%--})--%>
                    <%--}--%>
                    <%--if (d.status == 0) {--%>

                        <%--&lt;%&ndash;prompt("正在前往购物车", 900);&ndash;%&gt;--%>
                        <%--&lt;%&ndash;var c = 1;&ndash;%&gt;--%>
                        <%--&lt;%&ndash;window.setInterval(function () {&ndash;%&gt;--%>
                        <%--&lt;%&ndash;c--;&ndash;%&gt;--%>
                        <%--&lt;%&ndash;if (c == 0) {&ndash;%&gt;--%>
                        <%--&lt;%&ndash;location.href = "${pageContext.request.contextPath}/car/showcar.do";&ndash;%&gt;--%>
                        <%--&lt;%&ndash;}&ndash;%&gt;--%>
                        <%--&lt;%&ndash;}, 1000);&ndash;%&gt;--%>

                    <%--}--%>
                <%--}--%>
            <%--})--%>
        <%--}--%>
    <%--}--%>

    <%--function createorder() {--%>
        <%--$.ajax({--%>
            <%--url: "${pageContext.request.contextPath}/order/createOrder.do",--%>
            <%--type: "post",--%>
            <%--data: {--%>
                <%--pid:${product.pid},--%>
                <%--count: $("#quantity").val()--%>
            <%--},--%>
            <%--success: function (d) {--%>
                <%--if (d.status == 0) {--%>
                    <%--location.href = "${pageContext.request.contextPath}/order/gotoOrderInfo.do";--%>
                <%--}--%>
                <%--if (d.status == 1) {--%>
                    <%--noinventory();--%>
                <%--}--%>
            <%--}--%>
        <%--})--%>
    <%--}--%>

    <%--function noinventory() {--%>
        <%--prompt("库存不足", 900)--%>
    <%--}--%>

    <%--function updateCollect(data) {--%>
        <%--var _this = $(data);--%>
        <%--if (user == null) {--%>
            <%--prompt("you didn't login,went login");--%>
            <%--window.setTimeout(function () {--%>
                <%--window.location.href = "${pageContext.request.contextPath}/user/gotologin.do";--%>
            <%--}, 1000);--%>
        <%--} else {--%>
            <%--$.ajax({--%>
                <%--url: "${pageContext.request.contextPath}/product/updateCollect.do",--%>
                <%--type: "post",--%>
                <%--data: {--%>
                    <%--pid:${product.pid}--%>
                <%--},--%>
                <%--success: function (d) {--%>
                    <%--if (d.status == 1) {--%>
                        <%--prompt("正在前往登录", 900);--%>
                        <%--setTimeout(--%>
                            <%--function () {--%>
                                <%--window.location.href = "${pageContext.request.contextPath}/gotologin.do";--%>
                            <%--}, (1 * 1000));--%>
                    <%--}--%>
                    <%--if (d.status == 0) {--%>
                        <%--_this.toggleClass("btn-wish");--%>
                        <%--_this.toggleClass("btn-nowish");--%>
                        <%--if (d.data == 1) {--%>
                            <%--prompt("收藏商品成功", 800);--%>
                        <%--}--%>
                        <%--if (d.data == 0) {--%>
                            <%--prompt("已取消收藏", 900)--%>
                        <%--}--%>
                    <%--}--%>
                <%--}--%>
            <%--})--%>
        <%--}--%>
    <%--}--%>

    <%--function prompt(text, _time) {--%>
        <%--var windowWidth = $(window).width();--%>
        <%--var tipsDiv = '<div class="tipsClass">' + text + '</div>';--%>
        <%--$('body').append(tipsDiv);--%>
        <%--$('div.tipsClass').css({--%>
            <%--'top': 130 + 'px',--%>
            <%--'left': ( windowWidth / 2 ) - 350 / 2 + 'px',--%>
            <%--'position': 'fixed',--%>
            <%--'padding': '10px 16px',--%>
            <%--'background': '#7FFFD4',--%>
            <%--'font-size': 18 + 'px',--%>
            <%--'margin': '0 auto',--%>
            <%--'text-align': 'center',--%>
            <%--'width': '350px',--%>
            <%--'height': 'auto',--%>
            <%--'color': 'white',--%>
            <%--'opacity': '0.8'--%>
        <%--}).show();--%>
        <%--setTimeout(function () {--%>
            <%--$('div.tipsClass').fadeOut();--%>
        <%--}, _time);--%>
    <%--}--%>
<%--</script>--%>
</html>
